<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法1：插值表达式、data、methods、computed和watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h1 style="color:red;">知识点1：插值表达式</h1>
        <!-- {{}}插值表达式符号 -->
        <p>我是变量：{{msg}}</p>
        <p>我是表达式：{{num+100}}</p>
        <p>我是条件运算符：{{1+1==2?'ok':'no'}}</p>
        <p>我是方法：{{add()}}</p>
        <h1 style="color:red;">知识点2:data</h1>
        <h3>我们在控制台中可以通过实例名.$data的形式来访问或修改data中的数据</h3>
        <h1 style="color: red;">知识点3:methods</h1>
        <h3>方法的定义有两种形式:1.方法名（）{} 2.方法名:function(){}</h3>
        <p>{{sub(999999999)}}</p>
        <h1>知识点4:computed计算属性</h1>
        <h3>当我们遇到比较复杂的逻辑时，vue提倡我们使用computed计算属性
            在计算属性里面，我们可以解决比较复杂的逻辑，包括逻辑运算，函数调用等，最后只要返回一个结果就可以了

        </h3>
        <p>字符串倒置:{{rev}}</p>
        <p>调用方法字符串倒置：{{revMethod()}}</p>
        <h3>计算属性是基于其依赖的变量进行缓存的，只有它相关的依赖发生改变时，才会重新求值，
            而方法是每次页面刷新时都会重新调用
        </h3>
        <h3>通常计算属性是不能修改的，是只读的</h3>
        <h1>知识点5:watch 监听</h1>
        <h3>当我们在需要某种状态变化时，执行一些其他操作，watch具有状态监听功能
            只要监听到当前vue实例中数据变化，就会调用当前数据所绑定的方法
        </h3>
        <h4>1.函数式监听器：在watch选项中声明的函数即为函数式监听器，其中函数名就是我们要监听的数据源</h4>
        <h4>2.对象监听器：在watch选项中声明的对象即为对象式监视器，其中的对象名就是我们要监听的数据源</h4>
    </div>
</body>

</html>

<script>
    const appConn = Vue.createApp({
        //data里面放置全部的数据，包括变量和对象
        data() {
            return {
                msg: '我的第一个vue页面',
                num: 1,
                grade: 60,
                users: {
                    name: 'lkj',
                    age: 20
                    //对象
                }
            }
        },
        //在methods里面放置全部的方法
        methods: {
            add() {
                return this.num + 100000
            },
            sub: function (val) {
                return this.num + val
            },
            revMethod() {
                console.log("我是方法，我被调用了一次！")
                return this.msg.split('').reverse().join('')
            },
        },
        computed: {
            //在此處放置全部的计算属性
            rev() {
                console.log("我是计算属性，我被调用了一次！")
                return this.msg.split('').reverse().join('')
            }
        },
        watch: {
            //此处放置所有的监听器（侦听器）
            //函数式侦听器
            grade(newData, oldData) {
                console.log("改变前的数据" + oldData);
                console.log("改变后的数据" + newData);
                if (oldData < newData) {
                    console.log("你进步了，不错，奖励100元！")
                } else {
                    console.log("你退步了，快给我100元！")
                }
            },
            //对象式监听器
            'users.age': {
                handler(newData, oldData) {
                    console.log("改变前的数据" + oldData);
                    console.log("改变后的数据" + newData);
                    if (newData >= 120 || newData < 0)
                        console.log("你确定你输入的是年龄吗？")
                }
            }
        }
    }).mount("#app")
</script>